<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格系统快速入门</title>
  <link href="css/bootstrap.min.css" rel="stylesheet"/>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style>
    .inner{
      border:1px solid red;
    }
    img{
      width: 100%;
    }
  </style>
</head>
<body>
<!--第一步先定义容器，容器有2中 container container-fluid-->
<!--第二部定义一行 样式row -->
<!--1.定义容器-->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <img src="img/e25.jpg">
    </div>
  </div>
  <!--2.定义行-->
  <div class="row">
    <!--3.定义元素
        在大显示器一行12个格子
        在pad上一行6个格子
    -->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-sm-2 inner">栅格</div>-->

<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->
<!--    <div class="col-md-1 col-xs-2 inner">栅格</div>-->

    <div class="col-xs-4 inner">栅格</div>
    <div class="col-xs-6 inner">栅格</div>
    <div class="col-xs-4 inner">栅格</div>

  </div>

</div>
</body>
</html>